<style lang="less">
    @import '~vux/src/styles/reset.less';

    body {
        background-color: #eee;
    }
</style>
<style>
    @import './assets/font/css/font-awesome.css';
</style>

<template>
    <div id="app">
        <router-view style="width:100%"></router-view>
        <tabbar style="padding:10px 0">
            <tabbar-item v-for="item in tabData"
                         :key="item.link"
                         :link="item.link"
                         :selected="item.link.slice(1) === firstUrl"
                         style="font-size: 20px"
            >
                <i slot="icon" class="fa" :class="item.icon"></i>
                <span slot="label">{{item.label}}</span>
            </tabbar-item>
        </tabbar>
    </div>
</template>

<script>
    import {Tabbar, TabbarItem} from 'vux';
    export default {
        name: 'app',
        components: {
            Tabbar,
            TabbarItem
        },
        data() {
            return {
                tabData: [
                    {
                        link: '/',
                        label: '工作台',
                        icon: 'fa-th-large'
                    },
                    {
                        link: '/msg',
                        label: '消息',
                        icon: 'fa-commenting-o'
                    },
                    {
                        link: '/find',
                        label: '发现',
                        icon: 'fa-eye'
                    },
                    {
                        link: '/my',
                        label: '我的',
                        icon: 'fa-user-o'
                    },
                ],
            }
        },
        computed: {
            firstUrl() {
                return this.$route.fullPath.split('/')[1];
            },
            secondUrl() {
                return this.$route.fullPath.split('/')[2];
            },
            thirdUrl() {
                return this.$route.fullPath.split('/')[3];
            },
        },
        created() {


        },

    }
</script>
